<template>
  <div class="container">
    <OrderBar :username="userInfo.userName" :order="serviceNo"></OrderBar>
    <div class="content">
      <van-form ref="form" class="form">
        <van-field
          v-model="form.planDate"
          name="planDate"
          clickable
          label="制定日期"
          required
          readonly
          :rules="rules.planDate"
          placeholder="点击选择日期"
          @click="openCalendar('planDate')"
        />
        <van-field
          v-model="form.leaveDate"
          name="leaveDate"
          clickable
          required
          readonly
          :rules="rules.leaveDate"
          label="出发日期"
          placeholder="点击选择日期"
          @click="openCalendar('leaveDate')"
        />

        <van-field
          v-model="form.travelName"
          name="travel"
          clickable
          readonly
          required
          :rules="rules.travel"
          label="行程信息"
          placeholder="点击选择行程"
          @click="openPicker('travel')"
        />

        <van-field
          v-model="form.tools"
          name="tools"
          rows="1"
          required
          :rules="rules.tools"
          autosize
          label="工具仪器"
          type="textarea"
          maxlength="100"
          show-word-limit
          placeholder="请输入工具仪器"
        />

        <van-field
          v-model="form.materielDetail"
          name="materielDetail"
          rows="1"
          autosize
          required
          :rules="rules.materielDetail"
          label="预计物料"
          type="textarea"
          placeholder="请输入预计物料"
          maxlength="100"
          show-word-limit
        />

        <van-field
          v-model="form.safeMeasure"
          name="safeMeasure"
          rows="1"
          autosize
          label="安全措施"
          required
          :rules="rules.safeMeasure"
          type="textarea"
          maxlength="500"
          show-word-limit
          placeholder="请输入安全措施"
        />

        <van-field
          v-model="form.dealScheme"
          name="dealScheme"
          rows="1"
          autosize
          label="处理方案"
          required
          :rules="rules.dealScheme"
          type="textarea"
          maxlength="500"
          show-word-limit
          placeholder="请输入处理方案"
        />

        <van-calendar
          v-model="showCalendar"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onConfirmCalendar"
        />

        <van-popup
          v-model="showPicker"
          position="bottom"
        >
          <van-picker
            show-toolbar
            :columns="currentOptions"
            value-key="label"
            @confirm="onConfirmPicker"
            @cancel="showPicker = false"
          >
            <van-search
              v-if="currentOptionsCache.length>showSearchMaxOptionsLength"
              slot="title"
              v-model="pickerKeyword"
              placeholder="快速搜索"
              shape="round"
              @input="filterCurrentOptions"
            />
          </van-picker>
        </van-popup>

        <div class="btns">
          <van-button
            v-if="form.planStatus !== '02'"
            type="primary"
            size="small"
            icon="clock"
            @click="save('/saleService/stagingSaleServicePlan')"
          >暂存
          </van-button>
          <van-button
            type="warning"
            size="small"
            icon="checked"
            @click="submit('/saleService/submitSaleServicePlan')"
          >{{ form.planStatus === '02' ? '更新' : '提交' }}</van-button>
          <van-button
            type="danger"
            size="small"
            icon="clear"
            @click="close"
          >关闭
          </van-button>
        </div>
      </van-form>
    </div>
  </div>

</template>

<script>
import OrderBar from '../../components/OrderBar'
import { urlParams } from '../../assets/utils'
import { form, userInfo } from '../../assets/utils/mixin'

export default {
  components: { OrderBar },
  mixins: [ userInfo, form ],
  data() {
    return {
      serviceNo: urlParams.get('serviceNo'),
      form: {
        saleServiceId: urlParams.get('saleServiceId'),
        planNo: urlParams.get('planNo'),

        planDate: null,
        leaveDate: null,
        travelName: '',
        travel: '',
        tools: '',
        materielDetail: '',
        safeMeasure: '',
        dealScheme: '',
      },

      options: {
        travel: [
          { label: '公司派车', value: '01' },
          { label: '非公司派车', value: '02' },
        ],
      },

      rules: {
        planDate: [ { required: true } ],
        leaveDate: [ { required: true } ],
        travelName: [ { required: true } ],
        travel: [ { required: true } ],
        tools: [ { required: true } ],
        materielDetail: [ { required: true } ],
        safeMeasure: [ { required: true } ],
        dealScheme: [ { required: true } ],
      },
    }
  },
  computed: {},
  watch: {},
  created() {
    this.init()
  },
  mounted() {
  },
  methods: {
    init() {
      this.getUserInfo()
      this.getPlanNo()
    },

    // 回显数据
    async getPlanNo() {
      // 这个需要通过计划单号来查询  不能拿id去查 没有计划单号说明是新增
      if (!this.form.planNo) return
      const res = await this.server.get('/saleService/findSaleServicePlanByPlanNo', {
        planNo: this.form.planNo,
      })
      if (res.code === '0') {
        Object.assign(this.form, res.object)
        // 处理下拉
        this.form.travelName = this.options.travel.find(e =>
          e.value === this.form.travel,
        )?.label || ''
      }
    },

  },
}
</script>

<style lang="less" scoped>
@import "../../assets/var";

.container {
  width: 100%;
  height: 100%;
  background: #f8f8f8;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;

  > div {
    width: 100%;
  }

  .content{
    position: relative;
    flex: 1;
    background: #f8f8f8;
    .form {
      margin-bottom: 100px;
      width: 100%;
      min-height: calc(100% - 56px);
      .btns {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin-bottom: 30px;
        .safe-margin();
      }
    }
  }

}
</style>
